<!-- TODO 消息联动刷新 -->
<style>
  .home {
    min-height: 100%;
    background-image: linear-gradient(
      188deg,
      rgba(228, 244, 253, 0.7) 0%,
      #ffffff 31%,
      #fefefe 66%,
      rgba(239, 243, 255, 0.57) 100%
    );
    border-radius: 8px;
    padding: 10px 20px 0 20px;
    position: relative;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-around;
  }

  /* 消息 start */
  #new-msg.layui-carousel {
    background-color: transparent;
  }

  #new-msg.layui-carousel > [carousel-item]:before {
    opacity: 0;
  }

  #new-msg .carousel-item-content {
    font-family: SourceHanSansCN-Normal;
    background: rgba(75, 110, 239, 0.05);
    border-radius: 2px;
    cursor: default;
  }

  #new-msg .carousel-item-content .msg-item {
    line-height: 40px;
    padding-right: 30px;
    padding-left: 12px;
    font-family: SourceHanSansCN-Normal;
    font-size: 14px;
    color: #111111;
    letter-spacing: 0;
    font-weight: 400;
  }

  .msg-carousel {
    position: relative;
  }

  .close-btn {
    cursor: default;
    position: absolute;
    top: 9px;
    right: 12px;
  }

  .close-btn .layui-icon {
    font-size: 12px;
    font-weight: bolder;
    color: rgba(0, 0, 0, 0.7);
  }
  /* 消息 end */

  /* 主体内容 */
  .detail-body {
    padding-top: 14px;
    padding-left: 23px;
    flex: 1;
    width: 100%;
    box-sizing: border-box;
  }

  .detail-body .title {
    font-family: SourceHanSansCN-Medium;
    font-size: 30px;
    color: rgba(0, 0, 0, 0.85);
    font-weight: 500;
    margin-bottom: 20px;
  }

  /* 模板 start */
  .top-part {
    display: flex;
    align-items: center;
  }

  .top-part .home-img img {
    width: 486px;
    height: 240px;
    margin-left: 55px;
    margin-top: 10px;
  }

  .top-part .file-box-left .double-box .inner-box .inner-bottom {
    padding-bottom: 16px;
  }

  .detail-body .file-box .item-box {
    background: #ffffff;
    box-shadow: 0px 2px 10px 0px rgba(44, 109, 165, 0.06);
    border-radius: 10px;
    width: 310px;
  }

  .detail-body .file-box .item-box.danger-warn {
    padding: 11px 10px;
    box-sizing: border-box;
  }

  .detail-body .file-box .item-box.danger-warn .inner-box {
    background: rgba(239, 243, 255, 0.3);
    border-radius: 10px;
    padding: 0 14px;
  }

  .detail-body .file-box .item-box.danger-warn .inner-box .inner {
    color: rgba(0, 0, 0, 0.85);
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 18px;
  }

  .detail-body .file-box .item-box.danger-warn .inner-box .inner .left {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .info.warning.left {
    display: block !important;
  }

  .detail-body .file-box .item-box.danger-warn .inner-box .inner .left .icon {
    width: 44px;
    margin-right: 13px;
  }

  .detail-body
    .file-box
    .item-box.danger-warn
    .inner-box
    .inner
    .left
    .inner-title {
    font-family: SourceHanSansCN-Medium;
    margin-bottom: 12px;
    font-size: 16px;
    color: rgba(0, 0, 0, 0.85);
    letter-spacing: 0;
    font-weight: 500;
  }

  .detail-body
    .file-box
    .item-box.danger-warn
    .inner-box
    .inner
    .left
    .info
    .number {
    font-size: 16px;
    color: rgba(0, 0, 0, 0.85);
    letter-spacing: 0;
    font-weight: 500;
  }

  .detail-body .file-box .item-box.danger-warn .inner-box .inner .right {
    line-height: 14px;
    font-weight: 400;
    text-align: right;
  }

  .detail-body
    .file-box
    .item-box.danger-warn
    .inner-box
    .inner
    .right
    .number {
    font-size: 24px;
    font-weight: 700;
  }

  .detail-body
    .file-box
    .item-box.danger-warn
    .inner-box
    .inner
    .right
    .number.dannger {
    color: #ff3535;
  }

  .detail-body
    .file-box
    .item-box.danger-warn
    .inner-box
    .inner
    .right
    .number.warning {
    color: #fa8c16;
  }

  .detail-body .file-box .item-box.danger-warn .inner-box .inner .right .link {
    margin-top: 11px;
    cursor: pointer;
    color: #4b6eef;
  }

  .detail-body .file-box .item-box.danger-warn .inner-box .inner .right .info {
    margin-top: 11px;
  }

  .detail-body
    .file-box
    .item-box.danger-warn
    .inner-box
    .inner
    .right
    .info
    .number {
    font-size: 16px;
    color: #222222;
    font-weight: 400;
  }

  .detail-body .file-box .item-box.danger-warn .inner-box .line {
    height: 1px;
    background-image: linear-gradient(
      -45deg,
      rgba(75, 110, 239, 0) 0%,
      rgba(75, 110, 239, 0.3) 100%
    );
    margin-top: 18px;
  }

  .detail-body .file-box .item-box.resolved-box {
    height: 100px;
    margin-top: 25px;
  }

  .detail-body .file-box .item-box.resolved-box .inner-box {
    height: 100%;
  }

  .detail-body .file-box .item-box.resolved-box .inner-box .inner {
    height: 100%;
    padding: 0;
  }

  .detail-body
    .file-box
    .item-box.resolved-box
    .inner-box
    .inner
    .left
    .inner-title {
    font-family: SourceHanSansCN-Medium;
    margin-bottom: 0;
  }

  .detail-body
    .file-box
    .item-box.danger-warn
    .inner-box
    .inner
    .right
    .number.resolved {
    color: #4b6eef;
  }

  .detail-body .file-box .device-info {
    margin-top: 25px;
    width: 100%;
    display: flex;
    justify-content: space-between;
  }

  .detail-body .file-box .device-info .device-info-item {
    width: 276px;
    background: #ffffff;
    box-shadow: 0px 2px 10px 0px rgba(44, 109, 165, 0.06);
    border-radius: 10px;
    padding: 15px 10px 15px 16px;
    box-sizing: border-box;
  }

  .detail-body .file-box .device-info .left {
    margin-bottom: 6px;
  }

  .detail-body .file-box .device-info .left .icon {
    width: 18px;
    margin-right: 10px;
  }

  .detail-body .file-box .device-info .right {
    padding-left: 30px;
    box-sizing: border-box;
    opacity: 0.65;
    font-size: 14px;
    color: #000000;
    line-height: 22px;
    font-weight: 400;
    word-wrap: break-word;
    word-break: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  /* 没消息时 另一种间隔 */
  .home.no-msg .detail-body .title {
    margin-bottom: 30px;
  }

  .home.no-msg .detail-body .file-box .item-box.resolved-box,
  .home.no-msg .detail-body .file-box .device-info {
    margin-top: 30px;
  }
</style>
<div class="home">
  <!-- 消息轮播 -->
  <div style="width: 100%; overflow: hidden; min-height: 10px">
    <div class="msg-carousel">
      <div class="layui-carousel" id="new-msg">
        <div id="msg-carousel-list" carousel-item></div>
      </div>
      <div class="close-btn" close-event="closeMsg">
        <i class="layui-icon layui-icon-close"></i>
      </div>
    </div>
  </div>
  <div class="detail-body">
    <div class="title">风险概况</div>
    <div class="file-box" id="file-box"></div>
  </div>
</div>
<script id="mainContent" type="text/html">
  <div class="top-part">
    <div class="file-box-left">
      <div class="item-box danger-warn double-box">
        <div class="inner-box">
          <div class="inner">
            <div class="left">
              <img class="icon" src="res/img/home/error.png" />
              <div style="line-height: 1">
                <div class="inner-title">敏感文件</div>
                <div class="info danger">
                  {{d.Violation.Day || 0}}天未处理
                  <span class="number">{{d.Violation.Count || 0}}</span> 个
                </div>
              </div>
            </div>
            <div class="right">
              <span class="number dannger">{{d.Violation.Total || 0}}</span> 个
              <div class="link">去整改 》</div>
            </div>
          </div>
          <div class="line"></div>
          <div class="inner inner-bottom">
            <div class="left">
              <img class="icon" src="res/img/home/warning.png" />
              <div style="line-height: 1">
                <div class="inner-title">疑似敏感文件</div>
                <div class="info warning left">
                  疑似标密
                  <span class="number">{{d.Suspect.Biaomi || 0}}</span> 个
                </div>
              </div>
            </div>
            <div class="right">
              <span class="number warning">{{d.Suspect.Total || 0}}</span> 个
              <div class="info warning right">
                包含敏感词
                <span class="number">{{d.Suspect.Keyword || 0}}</span> 个
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="item-box danger-warn resolved-box">
        <div class="inner-box">
          <div class="inner">
            <div class="left">
              <img class="icon" src="res/img/home/resolved.png" />
              <div class="inner-title">已整改</div>
            </div>
            <div class="right">
              <span class="number resolved">{{d.Delete || 0}}</span> 个
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="home-img">
      <img src="res/img/home/home-bg.png" alt="" srcset="" />
    </div>
  </div>

  <div class="device-info">
    <div class="device-info-item">
      <div class="left">
        <img class="icon" src="res/img/home/01.png" />
        操作系统
      </div>
      <div class="right system">
        <div>{{d.SystemName || "------"}}</div>
        <div>{{d.CpuName || "------"}}</div>
      </div>
    </div>
    <div class="device-info-item">
      <div class="left">
        <img class="icon" src="res/img/home/02.png" />
        硬盘信息
      </div>
      <div class="right hard-disk">
        <div>{{d.DiskName || "------"}}</div>
        <div>{{d.DiskSN || "------"}}</div>
      </div>
    </div>
    <div class="device-info-item">
      <div class="left">
        <img class="icon" src="res/img/home/03.png" />
        网络信息
      </div>
      <div class="right network">
        <div>{{d.IpAddr || "------"}}</div>
        <div>{{d.MacAddr || "------"}}</div>
      </div>
    </div>
  </div>
</script>
<script id="carouselItemView" type="text/html">
  {{# layui.each(d, function(index, item){ }}
  <div
    class="carousel-item-content"
    msg-event="msgToView"
    data-msgid="{{item.MessageID}}"
  >
    <div class="msg-item layui-elip">
      <img src="res/img/home/msg.png" style="width: 16px;margin-top: -2px;" />
      <span class="msg-item-content">{{item.Content}}</span>
    </div>
  </div>
  {{# }) }}
</script>
<script src="res/js/html2Text.js"></script>
<script type="text/javascript">
  layui.use(function () {
    let $ = layui.$;
    let carousel = layui.carousel;
    let laytpl = layui.laytpl;
    const cmdName = "MainwtIndexRes"; // 命令头 数据保存根据命令头区分
    window.addEventListener("setItemEvent", function (e) {
      if (e.key === cmdName) {
        var _this = sessionStorage.getItem(cmdName);
        setPageData(e.newValue);
      }
      if (e.key === "refresh") {
        getIndexData();
      }
    });

    // 数量、设备信息
    function setPageData(json) {
      let res = json ? JSON.parse(json) : {};

      // 主体内容 模板渲染
      prepareRenderTpl(res, "mainContent", "file-box");

      let msgList = res.MessageList;
      for (let i = 0; i < msgList.length; i++) {
        let item = msgList[i];
        item.Content = Html2Text(item.Content);
      }
      // 消息
      // 区分 在线离线
      let clientType = sessionStorage.getItem("clientType") || "Online";

      if (clientType === "Online") {
        prepareRenderCarousel(msgList || []);
      } else {
        $(".msg-carousel").addClass("layui-hide");
        $(".home").addClass("no-msg");
        $(".close-btn").addClass("layui-hide");
      }
    }

    // 模板 渲染
    function prepareRenderTpl(
      data,
      templetId,
      targetId,
      rendedCallback,
      beforeRenderCallback
    ) {
      if (!document.getElementById(templetId)) {
        return;
      }
      let getTpl = document.getElementById(templetId).innerHTML; // 模板渲染的内容
      let view = document.getElementById(targetId); // 挂载的目标位置

      if (typeof beforeRenderCallback === "function") {
        beforeRenderCallback(data);
      }
      laytpl(getTpl).render(data, function (html) {
        view.innerHTML = html;
        if (typeof rendedCallback === "function") {
          rendedCallback(data);
        }
      });
    }

    function getIndexData() {
      let data = {
        cmd: "MainwtIndexReq",
      };
      reqPageData(data);
    }

    getIndexData();

    // 消息轮播部分
    function prepareRenderCarousel(data) {
      if (!document.getElementById("carouselItemView")) {
        return;
      }
      let getTpl = document.getElementById("carouselItemView").innerHTML;
      let view = document.getElementById("msg-carousel-list");
      if (!data.length) {
        $(".msg-carousel").addClass("layui-hide");
        $(".home").addClass("no-msg");
        $(".close-btn").addClass("layui-hide");
      }
      laytpl(getTpl).render(data, function (html) {
        view.innerHTML = html;
        // 消息轮播
        carousel.render({
          elem: "#new-msg",
          width: "100%",
          height: "40px",
          arrow: "none", // 不显示箭头
          indicator: "none", // 不显示指示器
          anim: "updown", // 切换动画方式
        });
      });
    }

    // 跳转告警记录
    $(document).on("click", ".link", function (e) {
      e.preventDefault();
      window.location.hash = "alarm?type=MainwtViolationReq";
    });

    // 消息点击事件
    let util = layui.util;
    util.event("msg-event", {
      msgToView: function (param) {
        let data = {
          cmd: "MainwtMessageDetailReq",
          MessageID: param[0].dataset.msgid,
        };
        reqPageData(data);
        getIndexData();
      },
    });
    util.event("close-event", {
      closeMsg: function (param) {
        $(".msg-carousel").addClass("layui-hide");
        $(".home").addClass("no-msg");
        $(".close-btn").addClass("layui-hide");
      },
    });
  });
</script>
